/*
 * @Author: ZhaoZhiqi
 * @Date: 2024-01-29 14:24:09
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-02-25 14:54:51
 * @Description: 
 * @FilePath: \labtalk-admin\src\pages\Login\Login.jsx
 */

import { Stack, Paper, Input, Button, Group, Checkbox, Title, PasswordInput } from '@mantine/core';
import { useState, useEffect } from 'react';
import classes from "./Login.module.css";
import { useForm } from '@mantine/form';
import { loginAPI } from './api';
import { notifications } from '@mantine/notifications';
import { useNavigate } from 'react-router-dom';
import { getInfoAPI } from "./api.js";

export function Login() {
    const navigate = useNavigate();

    useEffect(() => {
        // getInfoAPI().then(res => {

        // })
    }, [])

    const form = useForm({
        name: 'form',
        initialValues: {
            username: "",
            password: ""
        },
        validate: {
            username: (value) => (!value ? '请输入用户名' : null),
            password: (value) => (!value ? '请输入密码' : null),
        },
    });

    const login = () => {
        if (!form.validate().hasErrors) {
            loginAPI({ ...form.values }).then(res => {
                if (res.status === 200) {
                    notifications.show({
                        title: '登录成功！',
                        message: '登录成功，正在为您跳转',
                        autoClose: 1500,
                        position: 'top-right',
                        color: 'green',
                    });

                    let token = res.data.Authorization;
                    localStorage.setItem('labtalk_token', token);
                    setTimeout(() => {
                        navigate('/code')
                    }, 1500)
                }
            }).catch(err => {
            })
        }
    }


    return (
        <Stack className={classes.container}>
            <div className={classes.loginImg}></div>
            <Title size="h1" mb={20} mt={-100}>Labtalk 管理后台</Title>
            <Paper className={classes.card} shadow="md" radius="lg" p="lg">
                <Stack style={{ padding: 20 }}>
                    <Input.Wrapper label="手机号码" >
                        <Input placeholder="请输入手机号码" {...form.getInputProps('username')} />
                    </Input.Wrapper>
                    <Input.Wrapper label="密码" >
                        <PasswordInput placeholder="请输入密码"  {...form.getInputProps('password')} />
                    </Input.Wrapper>
                    {/* <Group justify="space-between" mt="lg">
                        <Checkbox label="记住密码" />
                    </Group> */}
                    <Button mt={15} onClick={login}>登录</Button>
                </Stack>
            </Paper>
        </Stack>
    )
}